<template>
  <el-row>
    <!-- 用于将画面挤到中间 -->
    <el-col :span="3" style="height: 10px"></el-col>
    <el-col :span="18">
      <div class="mainContent">
        <el-form :model="form" :rules="rules" ref="form" label-width="200px">
          <el-row>
            <el-col :span="16" :offset="0">
              <el-input type="textarea" autosize placeholder="请输入内容 例如：
C00864
C00581
C00385" v-model="form.textarea"
                :autosize="{ minRows: 10, maxRows: 10}">
              </el-input>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px;">
            <el-col :span="6">
              <el-form-item label="显示我们预测可能存在的代谢物和路线">
                <el-switch v-model="showable" @change="changeSwitch"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-col>
    <el-col>
      <div id="mainMap" style="width: 2000px;height:1500px"></div>
    </el-col>
  </el-row>
</template>
<script>
  import user from "@/api/user";
  import st from "@/api/st";
  import * as echarts from 'echarts';
  export default {
    data() {
      return {
        // 表单的数据
        form: {
          textarea: "",
        },
        showable: false,
        mapData:[],
        // element表单的一些验证规则
        rules: {

        },
      };
    },
    mounted() {
      // 在开始分析之前进行验证数据的合理性
      this.createMap();
    },
    methods: {
      // 提交表单
      onSubmit() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            //如果通过验证 to do...
            var tempForm = JSON.parse(JSON.stringify(this.form));
            st.FPForSteinerTree(this.form).then((response) => {
              var mapdata = response.data.data
              this.mapData = mapdata
              this.createMap();
              this.renderDataWithOutDotLine(this.mapData);
            });
          } else {
            this.$message.error("表单出错啦")
            return false
          }
        })
      },
      // 获取图片
      downLoadImg(url) {
        window.open(url);
      },
      renderData(mapdata) {
        var myChart = echarts.init(document.getElementById('mainMap'));
        var routeData = []
        for (var i = 0; i < mapdata.trueReactionList.length; i++) {
          routeData.push({
            name: 'Route',
            type: 'lines',
            coordinateSystem: 'geo',
            geoIndex: 0,
            emphasis: {
              label: {
                show: false
              }
            },
            polyline: true,
            lineStyle: {
              color: '#ea9999',
              width: 5,
              opacity: 1,
              type: 'line'
            },
            data: [
              {
                coords: mapdata.trueReactionList[i],
              }
            ]
          })
        }
        for (var i = 0; i < mapdata.least_interaction_list.length; i++) {
          routeData.push({
            name: 'Route',
            type: 'lines',
            coordinateSystem: 'geo',
            geoIndex: 0,
            emphasis: {
              label: {
                show: false
              }
            },
            polyline: true,
            lineStyle: {
              color: '#44daf5',
              width: 5,
              opacity: 1,
              type: 'dotted'
            },
            data: [
              {
                coords: mapdata.least_interaction_list[i],
              }
            ]
          })
        }
        routeData.push({
          type: 'effectScatter',
          coordinateSystem: 'geo',
          geoIndex: 0,
          symbolSize: function (params) {
            return (params[2]);
          },
          itemStyle: {
            color: '#ea1c1c'
          },
          encode: {
            tooltip: 2
          },
          data: mapdata.trueCpdList
        });
        routeData.push({
          type: 'effectScatter',
          coordinateSystem: 'geo',
          geoIndex: 0,
          symbolSize: function (params) {
            return (params[2]);
          },
          itemStyle: {
            color: '#0000CD'
          },
          encode: {
            tooltip: 2
          },
          data: mapdata.least_cpd_list
        });
        var option = {
          series: routeData
        }
        myChart.setOption(option)
      },
      renderDataWithOutDotLine(mapdata) {
        var myChart = echarts.init(document.getElementById('mainMap'));
        var routeData = []
        for (var i = 0; i < mapdata.trueReactionList.length; i++) {
          routeData.push({
            name: 'Route',
            type: 'lines',
            coordinateSystem: 'geo',
            geoIndex: 0,
            emphasis: {
              label: {
                show: false
              }
            },
            polyline: true,
            lineStyle: {
              color: '#ea9999',
              width: 5,
              opacity: 1,
              type: 'line'
            },
            data: [
              {
                coords: mapdata.trueReactionList[i],
              }
            ]
          })
        }
        routeData.push({
          type: 'effectScatter',
          coordinateSystem: 'geo',
          geoIndex: 0,
          symbolSize: function (params) {
            return (params[2]);
          },
          itemStyle: {
            color: '#ea1c1c'
          },
          encode: {
            tooltip: 2
          },
          data: mapdata.trueCpdList
        });
        var option = {
          series: routeData
        }
        myChart.setOption(option)
      },
      changeSwitch(){
        console.log(this.mapData)
        if (this.showable && this.mapData.length!=0){
          this.createMap()
          this.renderData(this.mapData);
        }else if (this.showable == false && this.mapData.length!=0){
          this.createMap()
          this.renderDataWithOutDotLine(this.mapData);
        }
      },
      createMap() {
        document.getElementById("mainMap").removeAttribute("_echarts_instance_");
        var chartDom = document.getElementById('mainMap');
        var myChart = echarts.init(chartDom);
        var option;
        var mapdata = this.mapdata

        $.get('/pathway_map/pathway_bio.svg', function (svg) {
          echarts.registerMap('iceland_svg', { svg: svg });
          option = {
            tooltip: {
              formatter: function (params) {
                return [
                  params.data[5]
                ].join('<br>');
              }
            },
            geo: {
              tooltip: {
                show: true
              },
              map: 'iceland_svg',
              roam: true
            },
            series: []
          };
          myChart.setOption(option);
          myChart.getZr().on('click', function (params) {
            var pixelPoint = [params.offsetX, params.offsetY];
            var dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
            console.log(dataPoint);
          });
        });
      }
    }
  };
</script>
<style>
  .mainContent {
    max-width: 1000px;
  }
</style>